<template>
	<view class="income-container">
		<!-- 顶部统计卡片 -->
		<view class="stats-cards">
			<view class="stat-card total" :class="{'active': activeStat === 'total'}" @click="changeStat('total')">
				<view class="stat-icon">
					<i class="fas fa-wallet"></i>
				</view>
				<view class="stat-content">
					<view class="stat-value">¥ {{totalIncome}}</view>
					<view class="stat-label">总收入</view>
				</view>
			</view>

			<view class="stat-card today" :class="{'active': activeStat === 'today'}" @click="changeStat('today')">
				<view class="stat-icon">
					<i class="fas fa-sun"></i>
				</view>
				<view class="stat-content">
					<view class="stat-value">¥ {{todayIncome}}</view>
					<view class="stat-label">今日收入</view>
				</view>
			</view>

			<view class="stat-card month" :class="{'active': activeStat === 'month'}" @click="changeStat('month')">
				<view class="stat-icon">
					<i class="fas fa-calendar"></i>
				</view>
				<view class="stat-content">
					<view class="stat-value">¥ {{monthIncome}}</view>
					<view class="stat-label">本月收入</view>
				</view>
			</view>
		</view>

		<!-- 图表区域 -->
		<view class="chart-section">
			<view class="section-header">
				<text class="section-title">收益趋势</text>
				<view class="chart-tabs">
					<view class="tab-item" :class="{'active': chartType === 'week'}" @click="changeChartType('week')">
						<text>周视图</text>
					</view>
					<view class="tab-item" :class="{'active': chartType === 'month'}" @click="changeChartType('month')">
						<text>月视图</text>
					</view>
				</view>
				<view class="chart-controls" v-if="chartType === 'week'">
					<view class="week-nav-btn" @click="prevWeek">
						<i class="fas fa-chevron-left"></i>
						<text>上一周</text>
					</view>
					<text class="week-range">{{weekRangeText}}</text>
					<view class="week-nav-btn" @click="nextWeek">
						<text>下一周</text>
						<i class="fas fa-chevron-right"></i>
					</view>
				</view>
				<view class="chart-controls" v-else>
					<view class="week-nav-btn" @click="prevMonth">
						<i class="fas fa-chevron-left"></i>
						<text>上一月</text>
					</view>
					<text class="week-range">{{monthRangeText}}</text>
					<view class="week-nav-btn" @click="nextMonth">
						<text>下一月</text>
						<i class="fas fa-chevron-right"></i>
					</view>
				</view>
			</view>

			<view class="chart-container">
				<qiun-data-charts type="column" :chartData="chartData" :opts="chartOpts" @onClickItem="onChartItemClick"
					canvasId="incomeChart" />
			</view>
		</view>

		<!-- 排行榜模块 -->
		<view class="ranking-section">
			<view class="section-header">
				<text class="section-title">学生收入排行榜</text>
				<view class="ranking-filter">
					<view class="filter-item" :class="{'active': rankingType === 'total'}"
						@click="changeRankingType('total')">
						<text>总金额</text>
					</view>
					<view class="filter-item" :class="{'active': rankingType === 'count'}"
						@click="changeRankingType('count')">
						<text>预约次数</text>
					</view>
				</view>
			</view>

			<view class="ranking-list">
				<view class="ranking-item" v-for="(student, index) in visibleRankings" :key="student.name">
					<view class="rank-number"
						:class="{'top-1': index === 0, 'top-2': index === 1, 'top-3': index === 2}">
						<text>{{index + 1}}</text>
					</view>

					<view class="student-info">
						<image class="student-avatar" src="/static/aver2.jpg" mode="aspectFill"></image>
						<view class="student-details">
							<text class="student-name">{{student.name}}</text>
							<text class="student-grade">{{student.grade}}</text>
						</view>
					</view>

					<view class="ranking-data">
						<text class="amount" v-if="rankingType === 'total'">¥{{student.totalAmount.toFixed(2)}}</text>
						<text class="count" v-else>{{student.appointmentCount}}次</text>
						<text class="sub-text">{{rankingType === 'total' ? '总金额' : '预约次数'}}</text>
					</view>
				</view>
			</view>

			<!-- 展开/收起按钮 -->
			<view class="expand-btn" @click="toggleExpand" v-if="studentRankings.length > 3">
				<text>{{isExpanded ? '收起' : '展开全部'}}</text>
				<i class="fas" :class="isExpanded ? 'fa-chevron-up' : 'fa-chevron-down'"></i>
			</view>

			<view class="empty-state" v-if="studentRankings.length === 0">
				<i class="fas fa-trophy"></i>
				<text>暂无排行榜数据</text>
			</view>
		</view>

		<!-- 筛选区域 -->
		<view class="filter-section">
			<view class="filter-row">
				<picker @change="statusFilterChange" :value="statusFilterIndex" :range="statusOptions">
					<view class="filter-item">
						<i class="fas fa-filter"></i>
						<text>{{statusOptions[statusFilterIndex]}}</text>
					</view>
				</picker>

				<view class="filter-item" @click="sortData">
					<i class="fas fa-sort-amount-down"></i>
					<text>{{isAscending ? '时间升序' : '时间降序'}}</text>
				</view>

				<view class="filter-item reset-btn" @click="resetFilter">
					<i class="fas fa-sync"></i>
					<text>全部</text>
				</view>
			</view>

			<view class="student-filter">
				<view class="filter-item student-filter-btn" @click="toggleStudentFilter">
					<i class="fas fa-user-graduate"></i>
					<text>{{selectedStudent ? selectedStudent : '按学生筛选'}}</text>
					<i class="fas fa-chevron-down"></i>
				</view>

				<view class="student-dropdown" v-if="showStudentDropdown">
					<view class="dropdown-item" @click="selectStudent('')">全部学生</view>
					<view class="dropdown-item" v-for="student in studentList" :key="student"
						@click="selectStudent(student)">{{student}}</view>
				</view>
			</view>

			<!-- 添加日期筛选提示 -->
			<view class="date-filter-tip" v-if="selectedDate">
				<text>已选择日期: {{formatSelectedDate(selectedDate)}}</text>
				<view class="clear-date-btn" @click="clearDateFilter">
					<i class="fas fa-times"></i>
				</view>
			</view>
		</view>

		<!-- 学生统计卡片 -->
		<view class="student-stats" v-if="selectedStudent">
			<view class="student-card">
				<view class="student-header">
					<view>
						<image class="student-avatar" src="/static/default-avatar.png" mode="aspectFill"></image>
						<view class="student-details">
							<text class="student-name">{{selectedStudent}}</text>
							<text class="student-grade">{{getStudentGrade(selectedStudent)}}</text>
						</view>
					</view>
					<view class="total-amount">
						<text>¥ {{getStudentTotal(selectedStudent)}}</text>
					</view>
				</view>
				<view class="appointment-count">
					<text>共{{getStudentAppointmentCount(selectedStudent)}}次预约</text>
				</view>
			</view>
		</view>

		<!-- 新增收益总和图表 -->
		<view class="summary-chart-section">
			<view class="section-header">
				<text class="section-title">收益总览</text>
				<view class="summary-tabs">
					<view class="tab-item" :class="{'active': summaryType === 'monthly'}"
						@click="changeSummaryType('monthly')">
						<text>月度收益</text>
					</view>
					<view class="tab-item" :class="{'active': summaryType === 'weekly'}"
						@click="changeSummaryType('weekly')">
						<text>周度收益</text>
					</view>
				</view>
			</view>

			<view class="summary-stats">
				<view class="summary-stat">
					<text class="summary-value">¥{{summaryTotal}}</text>
					<text class="summary-label">总收益</text>
				</view>
				<view class="summary-stat">
					<text class="summary-value">{{summaryCount}}</text>
					<text class="summary-label">预约次数</text>
				</view>
				<view class="summary-stat highlight">
					<text class="summary-value">¥{{summaryAverage}}</text>
					<text class="summary-label">平均收益</text>
				</view>
			</view>

			<view class="summary-chart-container">
				<qiun-data-charts type="area" :chartData="summaryChartData" :opts="summaryChartOpts"
					canvasId="summaryChart" />
			</view>
		</view>

		<!-- 收入明细列表 -->
		<view class="income-list">
			<view class="section-header">
				<text class="section-title">收入明细</text>
				<text class="record-count">共{{filteredAppointments.length}}条记录</text>
			</view>

			<view class="list-container">
				<view class="income-item" v-for="(item, index) in filteredAppointments" :key="item.id"
					:class="{'finished': item.isFinish}" @click="showDetail(item)">
					<view class="item-header">
						<view class="student-badge">
							<text>{{item.studentName}}</text>
						</view>
						<view class="status-badge" :class="{'finished': item.isFinish}">
							<text>{{item.isFinish ? '已完成' : '未完成'}}</text>
						</view>
					</view>

					<view class="item-content">
						<view class="content-left">
							<view class="course-info">
								<text class="course-name">{{item.appointmentContent}}</text>
								<text class="course-time">{{formatAppointmentTime(item.appointmentTime)}}</text>
							</view>
							<view class="order-time">
								<i class="far fa-clock"></i>
								<text>{{formatDate(item.appointmentTime)}}</text>
							</view>
						</view>

						<view class="income-amount">
							<text>¥{{item.money}}</text>
						</view>
					</view>

					<view class="teacher-info">
						<i class="fasher"></i>
						<text>{{item.teacherName}}</text>
					</view>
				</view>
			</view>

			<view class="empty-state" v-if="filteredAppointments.length === 0">
				<i class="fas fa-inbox"></i>
				<text>暂无收入记录</text>
			</view>
		</view>

		<!-- 详情弹窗 -->
		<uni-popup ref="detailPopup" type="center">
			<view class="detail-popup">
				<view class="popup-header">
					<text>课程详情</text>
					<i class="fas fa-times" @click="closeDetail"></i>
				</view>
				<view class="popup-content">
					<view class="detail-row">
						<text class="label">学生姓名</text>
						<text class="value">{{currentDetail.studentName}}</text>
					</view>
					<view class="detail-row">
						<text class="grade">年级</text>
						<text class="value">{{currentDetail.studentGrade}}</text>
					</view>
					<view class="detail-row">
						<text class="label">预约时间</text>
						<text class="value">{{currentDetail.appointmentTime}}</text>
					</view>
					<view class="detail-row">
						<text class="label">课程内容</text>
						<text class="value">{{currentDetail.appointmentContent}}</text>
					</view>
					<view class="detail-row">
						<text class="label">订单金额</text>
						<text class="value income">¥{{currentDetail.money}}</text>
					</view>
					<view class="detail-row" v-if="currentDetail.teacherComponent">
						<text class="label">教师评价</text>
						<text class="value evaluation">{{currentDetail.teacherComponent}}</text>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		globalVariable
	} from '../../configMy.js';
	export default {
		data() {
			return {
				chartType: 'week', // 图表类型，'week'或'month'
				summaryType: 'monthly', // 收益总览类型，'monthly'或'weekly'
				rankingType: 'total', // total: 总金额, count: 预约次数
				studentRankings: [],
				activeStat: 'total',
				statusFilterIndex: 0,
				statusOptions: ['全部状态', '已完成', '未完成'],
				selectedStudent: '',
				showStudentDropdown: false,
				isAscending: false,
				appointments: [],
				filteredAppointments: [],
				currentDetail: {},
				totalIncome: 0,
				todayIncome: 0,
				monthIncome: 0,
				studentList: [],
				currentWeekStart: null,
				currentMonthStart: null, // 当前月份
				selectedDate: null, // 当前选中的日期
				isExpanded: false, // 控制展开状态
				chartData: {
					categories: [],
					series: [{
						name: '收益',
						data: []
					}]
				},
				chartOpts: {
					color: ["#1890FF"],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: true
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2,
						data: []
					},
					extra: {
						column: {
							type: "group",
							width: 30
						}
					}
				},
				// 新增收益总览数据
				summaryChartData: {
					categories: [],
					series: [{
						name: '收益',
						data: []
					}]
				},
				summaryChartOpts: {
					color: ["#52c41a"],
					padding: [15, 15, 0, 15],
					enableScroll: false,
					legend: {},
					xAxis: {
						disableGrid: false
					},
					yAxis: {
						gridType: "dash",
						dashLength: 2
					},
					extra: {
						area: {
							type: "curve",
							opacity: 0.2,
							addLine: true,
							width: 2
						}
					}
				},
				summaryTotal: 0,
				summaryCount: 0,
				summaryAverage: 0
			}
		},
		computed: {
			weekRangeText() {
				if (!this.currentWeekStart) return '';
				const start = new Date(this.currentWeekStart);
				const end = new Date(start);
				end.setDate(start.getDate() + 6);

				return `${start.getMonth()+1}月${start.getDate()}日 - ${end.getMonth()+1}月${end.getDate()}日`;
			},
			// 修复月份范围文本
			monthRangeText() {
				if (!this.currentMonthStart) return '';
				const date = new Date(this.currentMonthStart);
				return `${date.getFullYear()}年${date.getMonth()+1}月`;
			},
			visibleRankings() {
				if (this.isExpanded) {
					return this.studentRankings;
				} else {
					return this.studentRankings.slice(0, 3);
				}
			}
		},
		mounted() {
			this.initWeekRange();
			this.initMonthRange();
			this.loadAppointments();
		},
		methods: {
			// 切换图表类型
			changeChartType(type) {
				this.chartType = type;
				this.prepareChartData();
			},

			// 新增：切换收益总览类型
			changeSummaryType(type) {
				this.summaryType = type;
				this.prepareSummaryChartData();
			},

			// 初始化月份范围
			initMonthRange() {
				const today = new Date();
				this.currentMonthStart = new Date(today.getFullYear(), today.getMonth(), 1).toISOString().split('T')[0];
			},

			// 获取月份的天数
			getMonthDays(year, month) {
				return new Date(year, month + 1, 0).getDate();
			},

			// 获取月份的所有日期
			getMonthDaysArray(year, month) {
				const daysInMonth = this.getMonthDays(year, month);
				const days = [];
				for (let i = 1; i <= daysInMonth; i++) {
					const date = new Date(year, month, i);
					days.push(date.toISOString().split('T')[0]);
				}
				return days;
			},

			// 修复：上一月
			prevMonth() {
				const current = new Date(this.currentMonthStart);
				current.setMonth(current.getMonth() - 1);
				this.currentMonthStart = new Date(current.getFullYear(), current.getMonth(), 1).toISOString().split('T')[
				0];
				this.selectedDate = null;
				this.prepareChartData();
				this.filterData();
			},

			// 修复：下一月
			nextMonth() {
				const current = new Date(this.currentMonthStart);
				current.setMonth(current.getMonth() + 1);
				this.currentMonthStart = new Date(current.getFullYear(), current.getMonth(), 1).toISOString().split('T')[
				0];
				this.selectedDate = null;
				this.prepareChartData();
				this.filterData();
			},

			// 新增：准备收益总览图表数据
			prepareSummaryChartData() {
				if (this.summaryType === 'monthly') {
					this.prepareMonthlySummaryData();
				} else {
					this.prepareWeeklySummaryData();
				}
			},

			// 月度收益总览数据
			prepareMonthlySummaryData() {
				// 获取最近6个月的数据
				const months = [];
				const monthlyData = [];
				const today = new Date();

				for (let i = 5; i >= 0; i--) {
					const date = new Date(today.getFullYear(), today.getMonth() - i, 1);
					const year = date.getFullYear();
					const month = date.getMonth();
					const monthStr = `${year}-${String(month + 1).padStart(2, '0')}`;

					months.push(`${year}年${month + 1}月`);

					// 计算该月总收入
					const monthlyIncome = this.appointments.reduce((sum, item) => {
						const itemMonth = item.appointmentTime.slice(0, 7);
						return itemMonth === monthStr ? sum + parseFloat(item.money || 0) : sum;
					}, 0);

					monthlyData.push(monthlyIncome);
				}

				this.summaryChartData = {
					categories: months,
					series: [{
						name: '月收益',
						data: monthlyData
					}]
				};

				// 更新统计信息
				this.updateSummaryStats(monthlyData);
			},

			// 周度收益总览数据
			prepareWeeklySummaryData() {
				// 获取最近8周的数据
				const weeks = [];
				const weeklyData = [];
				const today = new Date();

				for (let i = 7; i >= 0; i--) {
					const startDate = new Date(today);
					startDate.setDate(today.getDate() - today.getDay() - 7 * i);

					const endDate = new Date(startDate);
					endDate.setDate(startDate.getDate() + 6);

					weeks.push(
						`${startDate.getMonth()+1}/${startDate.getDate()}-${endDate.getMonth()+1}/${endDate.getDate()}`
						);

					// 计算该周总收入
					const weekIncome = this.appointments.reduce((sum, item) => {
						const itemDate = new Date(item.appointmentTime.split(' ')[0]);
						return itemDate >= startDate && itemDate <= endDate ? sum + parseFloat(item.money || 0) :
							sum;
					}, 0);

					weeklyData.push(weekIncome);
				}

				this.summaryChartData = {
					categories: weeks,
					series: [{
						name: '周收益',
						data: weeklyData
					}]
				};

				// 更新统计信息
				this.updateSummaryStats(weeklyData);
			},

			// 更新统计信息
			updateSummaryStats(data) {
				this.summaryTotal = data.reduce((sum, value) => sum + value, 0).toFixed(2);
				this.summaryCount = data.filter(value => value > 0).length;
				this.summaryAverage = (data.reduce((sum, value) => sum + value, 0) / (data.filter(value => value > 0)
					.length || 1)).toFixed(2);
			},

			// 计算收入
			calculateIncome() {
				this.totalIncome = this.appointments.reduce((sum, item) => {
					return sum + parseFloat(item.money || 0);
				}, 0).toFixed(2);

				const today = new Date().toISOString().split('T')[0];
				this.todayIncome = this.appointments.reduce((sum, item) => {
					const itemDate = item.appointmentTime.split(' ')[0];
					return itemDate === today ? sum + parseFloat(item.money || 0) : sum;
				}, 0).toFixed(2)

				const currentMonth = new Date().toISOString().slice(0, 7);
				this.monthIncome = this.appointments.reduce((sum, item) => {
					const itemMonth = item.appointmentTime.slice(0, 7);
					return itemMonth === currentMonth ? sum + parseFloat(item.money || 0) : sum;
				}, 0).toFixed(2);
			},

			// 准备图表数据
			prepareChartData() {
				if (this.chartType === 'week') {
					this.prepareWeekChartData();
				} else {
					this.prepareMonthChartData();
				}
			},

			// 周视图图表数据
			prepareWeekChartData() {
				if (!this.currentWeekStart) return;

				const weekDays = this.getWeekDays(this.currentWeekStart);
				const dailyIncome = {};

				weekDays.forEach(day => {
					dailyIncome[day] = 0;
				});

				this.appointments.forEach(item => {
					const date = item.appointmentTime.split(' ')[0];
					if (weekDays.includes(date)) {
						dailyIncome[date] += parseFloat(item.money || 0);
					}
				});

				this.chartData = {
					categories: weekDays.map(date => {
						const d = new Date(date);
						return `${d.getMonth()+1}/${d.getDate()}`;
					}),
					series: [{
						name: '收益',
						data: Object.values(dailyIncome)
					}]
				};
			},

			// 月视图图表数据
			prepareMonthChartData() {
				if (!this.currentMonthStart) return;

				const current = new Date(this.currentMonthStart);
				const year = current.getFullYear();
				const month = current.getMonth();

				const monthDays = this.getMonthDaysArray(year, month);
				const dailyIncome = {};

				monthDays.forEach(day => {
					dailyIncome[day] = 0;
				});

				this.appointments.forEach(item => {
					const date = item.appointmentTime.split(' ')[0];
					if (monthDays.includes(date)) {
						dailyIncome[date] += parseFloat(item.money || 0);
					}
				});

				this.chartData = {
					categories: monthDays.map(date => {
						const d = new Date(date);
						return `${d.getDate()}日`;
					}),
					series: [{
						name: '收益',
						data: Object.values(dailyIncome)
					}]
				};
			},

			// 其他方法保持不变...
			filterData() {
				let filtered = this.appointments;

				if (this.selectedDate) {
					filtered = filtered.filter(item => {
						return item.appointmentTime.startsWith(this.selectedDate);
					});
				}

				if (this.statusFilterIndex === 1) {
					filtered = filtered.filter(item => item.isFinish === 1);
				} else if (this.statusFilterIndex === 2) {
					filtered = filtered.filter(item => item.isFinish !== 1);
				}

				if (this.selectedStudent) {
					filtered = filtered.filter(item => item.studentName === this.selectedStudent);
				}

				this.filteredAppointments = filtered;
			},

			sortData() {
				this.isAscending = !this.isAscending;
				this.filteredAppointments.sort((a, b) => {
					const dateA = new Date(a.appointmentTime.split(' ')[0]);
					const dateB = new Date(b.appointmentTime.split(' ')[0]);
					return this.isAscending ? dateA - dateB : dateB - dateA;
				});
			},

			formatDate(dateString) {
				if (!dateString) return '';
				return dateString.split(' ')[0];
			},

			formatAppointmentTime(timeString) {
				if (!timeString) return '';
				const [date, time, duration] = timeString.split(' ');
				return `${date} | ${time} ${duration}`;
			},

			toggleExpand() {
				this.isExpanded = !this.isExpanded;
			},

			changeRankingType(type) {
				this.rankingType = type;
				this.isExpanded = false;
				this.generateStudentRankings();
			},

			generateStudentRankings() {
				const studentMap = {};

				this.appointments.forEach(item => {
					if (!studentMap[item.studentName]) {
						studentMap[item.studentName] = {
							name: item.studentName,
							grade: item.studentGrade,
							totalAmount: 0,
							appointmentCount: 0
						};
					}

					studentMap[item.studentName].totalAmount += parseFloat(item.money || 0);
					studentMap[item.studentName].appointmentCount++;
				});

				let rankings = Object.values(studentMap);

				if (this.rankingType === 'total') {
					rankings.sort((a, b) => b.totalAmount - a.totalAmount);
				} else {
					rankings.sort((a, b) => b.appointmentCount - a.appointmentCount);
				}

				this.studentRankings = rankings;
			},

			formatSelectedDate(dateString) {
				if (!dateString) return '';
				const date = new Date(dateString);
				return `${date.getMonth()+1}月${date.getDate()}日`;
			},

			clearDateFilter() {
				this.selectedDate = null;
				this.filterData();
				uni.showToast({
					title: '已清除日期筛选',
					icon: 'success',
					duration: 1500
				});
			},

			initWeekRange() {
				const today = new Date();
				const dayOfWeek = today.getDay();
				const startOfWeek = new Date(today);
				startOfWeek.setDate(today.getDate() - dayOfWeek + (dayOfWeek === 0 ? -6 : 1));

				this.currentWeekStart = startOfWeek.toISOString().split('T')[0];
			},

			loadAppointments() {
				let that = this;
				uni.showLoading({
					title: '加载中...'
				});
				uni.request({
					url: globalVariable + "/getAllAppointmentAdmin",
					success(res) {
						uni.hideLoading();
						let info = res.data;
						that.appointments = info.data;
						that.processAppointments();
					},
					fail() {
						uni.hideLoading();
						uni.showToast({
							title: 'shibai',
							icon: 'none'
						});
					}
				});
			},

			processAppointments() {
				this.appointments.sort((a, b) => {
					return new Date(b.appointmentTime.split(' ')[0]) - new Date(a.appointmentTime.split(' ')[0]);
				});

				this.filteredAppointments = [...this.appointments];
				this.calculateIncome();
				this.prepareChartData();
				this.prepareSummaryChartData(); // 新增：准备收益总览数据
				this.generateStudentList();
				this.generateStudentRankings();
			},

			getWeekDays(startDate) {
				const days = [];
				const start = new Date(startDate);

				for (let i = 0; i < 7; i++) {
					const date = new Date(start);
					date.setDate(start.getDate() + i);
					days.push(date.toISOString().split('T')[0]);
				}

				return days;
			},

			prevWeek() {
				const current = new Date(this.currentWeekStart);
				current.setDate(current.getDate() - 7);
				this.currentWeekStart = current.toISOString().split('T')[0];
				this.selectedDate = null;
				this.prepareChartData();
				this.filterData();
			},

			nextWeek() {
				const current = new Date(this.currentWeekStart);
				current.setDate(current.getDate() + 7);
				this.currentWeekStart = current.toISOString().split('T')[0];
				this.selectedDate = null;
				this.prepareChartData();
				this.filterData();
			},

			onChartItemClick(e) {
				if (e && e.index !== undefined) {
					if (this.chartType === 'week') {
						const weekDays = this.getWeekDays(this.currentWeekStart);
						if (weekDays[e.index]) {
							this.selectedDate = weekDays[e.index];
							this.filterData();

							uni.showToast({
								title: `已筛选 ${this.formatSelectedDate(this.selectedDate)} 的数据`,
								icon: 'none',
								duration: 2000
							});
						}
					}
				}
			},

			// 其他方法保持不变...
			generateStudentList() {
				const students = new Set();
				this.appointments.forEach(item => {
					students.add(item.studentName);
				});
				this.studentList = Array.from(students);
			},

			changeStat(stat) {
				this.activeStat = stat;
			},

			statusFilterChange(e) {
				this.statusFilterIndex = e.detail.value;
				this.filterData();
			},

			toggleStudentFilter() {
				this.showStudentDropdown = !this.showStudentDropdown;
			},

			selectStudent(student) {
				this.selectedStudent = student;
				this.showStudentDropdown = false;
				this.filterData();
			},

			resetFilter() {
				this.selectedDate = null;
				this.selectedStudent = '';
				this.statusFilterIndex = 0;
				this.filterData();
				uni.showToast({
					title: '已重置所有筛选条件',
					icon: 'success',
					duration: 1500
				});
			},

			getStudentGrade(studentName) {
				const student = this.appointments.find(item => item.studentName === studentName);
				return student ? student.studentGrade : '';
			},

			getStudentTotal(studentName) {
				return this.appointments
					.filter(item => item.studentName === studentName)
					.reduce((sum, item) => sum + parseFloat(item.money || 0), 0)
					.toFixed(2);
			},

			getStudentAppointmentCount(studentName) {
				return this.appointments.filter(item => item.studentName === studentName).length;
			},

			showDetail(item) {
				this.currentDetail = item;
				this.$refs.detailPopup.open();
			},

			closeDetail() {
				this.$refs.detailPopup.close();
			}
		}
	}
</script>



<style scoped>
	/* 新增收益总览样式 */
	.summary-chart-section {
		background: white;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
	}

	.summary-tabs {
		display: flex;
		background: #f5f7fa;
		border-radius: 50rpx;
		padding: 4rpx;
		margin-bottom: 20rpx;
	}

	.summary-tabs .tab-item {
		padding: 12rpx 24rpx;
		border-radius: 50rpx;
		font-size: 26rpx;
		color: #666;
		transition: all 0.3s ease;
	}

	.summary-tabs .tab-item.active {
		background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
		color: white;
		box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.3);
	}

	.summary-stats {
		display: flex;
		justify-content: space-between;
		margin-bottom: 30rpx;
		padding: 20rpx;
		background: linear-gradient(135deg, #f6ffed 0%, #f0fff3 100%);
		border-radius: 12rpx;
		border: 1rpx solid #b7eb8f;
	}

	.summary-stat {
		text-align: center;
		flex: 1;
	}

	.summary-stat.highlight {
		background: linear-gradient(135deg, #52c41a 0%, #73d13d 100%);
		border-radius: 12rpx;
		padding: 15rpx;
		margin: -15rpx -10rpx;
		color: white;
		box-shadow: 0 4rpx 12rpx rgba(82, 196, 26, 0.3);
	}

	.summary-value {
		display: block;
		font-size: 32rpx;
		font-weight: bold;
		color: #52c41a;
		margin-bottom: 8rpx;
	}

	.summary-stat.highlight .summary-value {
		color: white;
	}

	.summary-label {
		font-size: 24rpx;
		color: #666;
	}

	.summary-stat.highlight .summary-label {
		color: rgba(255, 255, 255, 0.9);
	}

	.summary-chart-container {
		width: 100%;
		height: 300rpx;
	}

	/* 图表标签样式 */
	.chart-tabs {
		display: flex;
		background: #f5f7fa;
		border-radius: 50rpx;
		padding: 4rpx;
		margin-bottom: 20rpx;
	}

	.chart-tabs .tab-item {
		padding: 12rpx 24rpx;
		border-radius: 50rpx;
		font-size: 26rpx;
		color: #666;
		transition: all 0.3s ease;
	}

	.chart-tabs .tab-item.active {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
	}

	/* 其他样式保持不变... */
	.date-filter-tip {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #e6f7ff;
		border: 1px solid #91d5ff;
		border-radius: 8rpx;
		padding: 16rpx 20rpx;
		margin-top: 20rpx;
		color: #1890ff;
		font-size: 26rpx;
	}

	.clear-date-btn {
		padding: 8rpx;
		border-radius: 50%;
		background: #91d5ff;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36rpx;
		height: 36rpx;
	}

	.clear-date-btn:active {
		background: #69c0ff;
		transform: scale(0.95);
	}

	.income-container {
		padding: 20rpx;
		background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
		min-height: 100vh;
	}

	/* 添加图表标签样式 */
	.chart-tabs {
		display: flex;
		background: #f5f7fa;
		border-radius: 50rpx;
		padding: 4rpx;
		margin-bottom: 20rpx;
	}

	.chart-tabs .tab-item {
		padding: 12rpx 24rpx;
		border-radius: 50rpx;
		font-size: 26rpx;
		color: #666;
		transition: all 0.3s ease;
	}

	.chart-tabs .tab-item.active {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
	}

	/* 添加日期筛选提示样式 */
	.date-filter-tip {
		display: flex;
		align-items: center;
		justify-content: space-between;
		background: #e6f7ff;
		border: 1px solid #91d5ff;
		border-radius: 8rpx;
		padding: 16rpx 20rpx;
		margin-top: 20rpx;
		color: #1890ff;
		font-size: 26rpx;
	}

	.clear-date-btn {
		padding: 8rpx;
		border-radius: 50%;
		background: #91d5ff;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 36rpx;
		height: 36rpx;
	}

	.clear-date-btn:active {
		background: #69c0ff;
		transform: scale(0.95);
	}

	/* 其他样式保持不变 */
	.income-container {
		padding: 20rpx;
		background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
		min-height: 100vh;
	}

	/* 添加排行榜样式 */
	.ranking-section {
		background: white;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
	}

	.ranking-filter {
		display: flex;
		background: #f5f7fa;
		border-radius: 50rpx;
		padding: 4rpx;
	}

	.ranking-filter .filter-item {
		padding: 12rpx 24rpx;
		border-radius: 50rpx;
		font-size: 26rpx;
		color: #666;
		transition: all 0.3s ease;
	}

	.ranking-filter .filter-item.active {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		color: white;
		box-shadow: 0 4rpx 12rpx rgba(102, 126, 234, 0.3);
	}

	.ranking-list {
		margin-top: 20rpx;
	}

	.ranking-item {
		display: flex;
		align-items: center;
		padding: 25rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.ranking-item:last-child {
		border-bottom: none;
	}

	.rank-number {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		background: #f5f7fa;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
		font-weight: bold;
		color: #666;
		margin-right: 20rpx;
	}

	.rank-number.top-1 {
		background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
		color: white;
	}

	.rank-number.top-2 {
		background: linear-gradient(135deg, #C0C0C0 0%, #A9A9A9 100%);
		color: white;
	}

	.rank-number.top-3 {
		background: linear-gradient(135deg, #CD7F32 0%, #8B4513 100%);
		color: white;
	}

	.student-info {
		flex: 1;
		display: flex;
		align-items: center;
	}

	.student-info .student-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		background: #f5f7fa;
	}

	.student-details {
		display: flex;
		flex-direction: column;
	}

	.expand-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 20rpx;
		background: #f5f7fa;
		border-radius: 12rpx;
		color: #666;
		font-size: 28rpx;
		margin-top: 20rpx;
		transition: all 0.3s ease;
	}

	.expand-btn:active {
		background: #e4e8f0;
		transform: scale(0.98);
	}

	.expand-btn i {
		margin-left: 10rpx;
		font-size: 24rpx;
	}

	/* 调整排行榜项样式 */
	.ranking-item {
		display: flex;
		align-items: center;
		padding: 25rpx 0;
		border-bottom: 1rpx solid #f0f0f0;
		transition: all 0.3s ease;
	}

	.ranking-item:hover {
		background-color: #fafafa;
	}

	/* 确保金额显示两位小数 */
	.ranking-data .amount {
		font-size: 28rpx;
		font-weight: bold;
		color: #ff6b6b;
	}

	.student-name {
		font-size: 30rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 5rpx;
	}

	.student-grade {
		font-size: 24rpx;
		color: #999;
	}

	.ranking-data {
		text-align: right;
	}

	.ranking-data .amount {
		font-size: 32rpx;
		font-weight: bold;
		color: #ff6b6b;
		display: block;
	}

	.ranking-data .count {
		font-size: 32rpx;
		font-weight: bold;
		color: #4facfe;
		display: block;
	}

	.ranking-data .sub-text {
		font-size: 22rpx;
		color: #999;
	}

	.stats-cards {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		margin-bottom: 30rpx;
		gap: 20rpx;
	}

	.stat-card {
		flex: 1;
		min-width: 200rpx;
		border-radius: 20rpx;
		padding: 30rpx;
		color: white;
		display: flex;
		align-items: center;
		box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1);
		transition: all 0.3s ease;
		backdrop-filter: blur(10px);
	}

	.stat-card.total {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
	}

	.stat-card.today {
		background: linear-gradient(135deg, #f093fb 0%, #f5576c);
	}

	.stat-card.month {
		background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
	}

	.chart-section {
		background: white;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
	}

	.section-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 30rpx;
	}

	.section-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}

	.chart-controls {
		display: flex;
		align-items: center;
		gap: 20rpx;
	}

	.week-nav-btn {
		display: flex;
		align-items: center;
		padding: 12rpx 20rpx;
		background: #f5f7fa;
		border-radius: 20rpx;
		font-size: 24rpx;
		color: #666;
		transition: all 0.3s ease;
	}

	.week-nav-btn:active {
		background: #e4e8f0;
		transform: scale(0.95);
	}

	.week-range {
		font-size: 26rpx;
		color: #666;
		font-weight: 500;
	}

	.chart-container {
		width: 100%;
		height: 400rpx;
	}

	.filter-section {
		background: white;
		border-radius: 16rpx;
		padding: 20rpx 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
	}

	.filter-row {
		display: flex;
		justify-content: space-between;
		margin-bottom: 20rpx;
	}

	.filter-item {
		display: flex;
		align-items: center;
		padding: 15rpx 25rpx;
		background: #f5f7fa;
		border-radius: 50rpx;
		font-size: 26rpx;
		color: #666;
		transition: all 0.3s ease;
	}

	.filter-item:active {
		background: #e4e8f0;
		transform: scale(0.95);
	}

	.filter-item i {
		margin-right: 10rpx;
	}

	.reset-btn {
		background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%) !important;
		color: white !important;
	}

	.student-filter {
		position: relative;
	}

	.student-filter-btn {
		background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%) !important;
		color: white !important;
	}

	.student-filter-btn i:first-child {
		margin-right: 12rpx;
	}

	.student-filter-btn i:last-child {
		margin-left: 12rpx;
		font-size: 24rpx;
		transition: transform 0.3s ease;
	}

	.student-dropdown {
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: white;
		border-radius: 16rpx;
		margin-top: 10rpx;
		box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.15);
		border: 1rpx solid #e8e8e8;
		z-index: 1000;
		max-height: 400rpx;
		overflow-y: auto;
		animation: dropdownSlide 0.3s ease;
	}

	@keyframes dropdownSlide {
		from {
			opacity: 0;
			transform: translateY(-10rpx);
		}

		to {
			opacity: 1;
			transform: translateY(0);
		}
	}

	.dropdown-item {
		padding: 24rpx 30rpx;
		font-size: 28rpx;
		color: #333;
		border-bottom: 1rpx solid #f0f0f0;
		transition: all 0.2s ease;
		display: flex;
		align-items: center;
	}

	.dropdown-item:last-child {
		border-bottom: none;
	}

	.dropdown-item:active {
		background-color: #f5f7fa;
		transform: scale(0.98);
	}

	.dropdown-item::before {
		content: '';
		width: 12rpx;
		height: 12rpx;
		border-radius: 50%;
		background: linear-gradient(135deg, #667eea 0%, 100%);
		margin-right: 16rpx;
		transition: all 0.3s ease;
	}

	.dropdown-item:first-child::before {
		background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
	}

	.dropdown-item:hover::before {
		transform: scale(1.2);
	}

	.student-card {
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		border-radius: 20rpx;
		padding: 30rpx;
		color: white;
		margin-bottom: 30rpx;
	}

	.student-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.student-info {
		display: flex;
		align-items: center;
	}

	.student-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 20rpx;
		background: rgba(255, 255, 255, 0.2);
	}

	.student-name {
		font-size: 32rpx;
		font-weight: bold;
		display: block;
	}

	.student-grade {
		font-size: 26rpx;
		opacity: 0.9;
	}

	.total-amount {
		font-size: 36rpx;
		font-weight: bold;
	}

	.appointment-count {
		font-size: 26rpx;
		opacity: 0.9;
	}

	.income-list {
		background: white;
		border-radius: 16rpx;
		padding: 30rpx;
		margin-bottom: 30rpx;
		box-shadow: 0 5rpx 15rpx rgba(0, 0, 0, 0.05);
	}

	.record-count {
		font-size: 26rpx;
		color: #999;
	}

	.income-item {
		background: white;
		border-radius: 20rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 4rpx 15rpx rgba(0, 0, 0, 0.05);
		border-left: 6rpx solid #4facfe;
		transition: all 0.3s ease;
	}

	.income-item.finished {
		border-left-color: #52c41a;
	}

	.income-item:active {
		transform: scale(0.98);
	}

	.item-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.student-badge {
		background: linear-gradient(135deg, #ff9a9e 0%, #fad0c4 100%);
		padding: 8rpx 20rpx;
		border-radius: 20rpx;
		color: white;
		font-size: 24rpx;
		font-weight: bold;
	}

	.status-badge {
		padding: 8rpx 20rpx;
		border-radius: 20rpx;
		font-size: 24rpx;
		font-weight: bold;
		background: #fff566;
		color: #333;
	}

	.status-badge.finished {
		background: #b7eb8f;
		color: #237804;
	}

	.item-content {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.course-info {
		margin-bottom: 15rpx;
	}

	.course-name {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
		display: block;
		margin-bottom: 8rpx;
	}

	.course-time {
		font-size: 26rpx;
		color: #666;
	}

	.order-time {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #999;
	}

	.order-time i {
		margin-right: 8rpx;
	}

	.income-amount {
		font-size: 36rpx;
		font-weight: bold;
		color: #ff6b6b;
	}

	.teacher-info {
		display: flex;
		align-items: center;
		font-size: 26rpx;
		color: #888;
		padding-top: 15rpx;
		border-top: 1rpx dashed #eee;
	}

	.teacher-info i {
		margin-right: 8rpx;
	}

	.empty-state {
		text-align: center;
		padding: 60rpx 0;
		color: #999;
	}

	.empty-state i {
		font-size: 80rpx;
		margin-bottom: 20rpx;
		display: block;
		color: #ccc;
	}

	.detail-popup {
		width: 600rpx;
		background: white;
		border-radius: 16rpx;
		overflow: hidden;
	}

	.popup-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
		font-size: 32rpx;
		font-weight: bold;
	}

	.popup-content {
		padding: 30rpx;
	}

	.detail-row {
		display: flex;
		margin-bottom: 20rpx;
	}

	.detail-row .label {
		width: 150rpx;
		color: #999;
		font-size: 28rpx;
	}

	.detail-row .value {
		flex: 1;
		color: #333;
		font-size: 28rpx;
	}

	.detail-row .income {
		color: #FF6B6B;
		font-weight: bold;
	}
</style>